<script setup>
import {onMounted, ref,onUnmounted} from 'vue'
import {ElButton, ElIcon, ElMessage, ElMessageBox} from "element-plus";
import {Delete, Document, Edit, Notebook, Plus, Warning} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {deleteRei, getReiShowByApplyId, submitRei} from "@/api/reimburse.js";
import {centsToYuan, numberToType} from "@/utiles/typeConverter.js";
import ReimbursementApply from "@/components/ReimbursementApply.vue";
import {eventBus} from "@/utiles/eventBus.js";


const reiApplyRef = ref()
const route = useRoute()
const router = useRouter()
const applyId = ref()
const zoomedImage = ref(null) // 当前放大的图片URL
// 行程计划数据
const plans = ref([])
onMounted(() => {
  applyId.value = route.query.id
  console.log(applyId.value)
  getApplies()
})

const getApplies = async () => {
  const {data} = await getReiShowByApplyId(applyId.value)
  console.log(data.data)
  plans.value = data.data
}

// 计算单个行程计划的报销总额
const getPlanReimburseTotal = (plan) => {
  if (!plan.reimbursements || plan.reimbursements.length === 0) return 0

  return plan.reimbursements.reduce((total, reimburse) => {
    return total + parseFloat(reimburse.amount)
  }, 0)
}

// 放大图片
const zoomImage = (imageUrl) => {
  zoomedImage.value = imageUrl
}

// 关闭放大图片
const closeZoom = () => {
  zoomedImage.value = null
}

const deleteReimburse = async (id) => {

  await ElMessageBox.confirm(
    '确定要删除这个报销项吗？此操作不可恢复。',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      confirmButtonClass: 'el-button--danger'
    }
  )

  const data = await deleteRei(id)
  await getApplies()
}

const reimbursementApply = (applyId,planId) =>{
  reiApplyRef.value.openDialog(applyId,planId,null)
}
const editReimburse = async (id) =>{
  reiApplyRef.value.openDialog(null,null,id)

}

const submitReimburse = async () => {
  const data = await submitRei(applyId.value)

  ElMessage.success('报销提交审核成功')
  router.push({
    name: 'ReimburseManage'
  })

}

onMounted(() => {
  eventBus.value.refreshApplies = getApplies
})

// 清理事件
onUnmounted(() => {
  eventBus.value.refreshApplies = null
})



</script>

<template>
  <div class="main">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>报销管理</el-breadcrumb-item>
      <el-breadcrumb-item>报销提交</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="container">
      <div v-if="plans.length > 0">
        <div v-for="(plan, index) in plans" :key="index" class="plan-card">
          <div class="plan-header">
            <span class="plan-span">行程计划</span>
            <span class="reimburse-span">报销记录</span>
          </div>

          <div class="plan-content">

            <div class="plan-detail">
              <span>{{ numberToType( plan.type) }} </span>
              <span>{{ plan.detail }}</span>
            </div>
            <div class="budget-detail">
              <span>{{ centsToYuan(plan.budgetAmount) }}</span>
              <span>{{ plan.budgetDetail }}</span>
            </div>
            <div class="reimburse-detail">
              <!-- 超支提醒 -->
              <div v-if="getPlanReimburseTotal(plan) > parseFloat(plan.budgetAmount)"
                   class="overspend-alert">
                <el-icon class="overspend-icon">
                  <Warning/>
                </el-icon>
                <div>
                  <strong>预算超支提醒</strong>
                  <p>该行程计划报销总额为 {{ getPlanReimburseTotal(plan) }} 元，超出预算
                    {{ (getPlanReimburseTotal(plan) - parseFloat(plan.budgetAmount)).toFixed(2) }}
                    元</p>
                </div>
              </div>
            </div>


          </div>

          <div class="reimburse-content">
            <div class="reimburse-section"
                 v-if="plan.reimburseDetails && plan.reimburseDetails.length > 0">
              <div v-for="(reimburse, rIndex) in plan.reimburseDetails" :key="rIndex"
                   class="reimburse-item">
                <div class="reimburse-header">
                  <div class="reimburse-amount">{{ reimburse.amount }} 元</div>
                  <div class="reimburse-detail">{{ reimburse.detail }}</div>
                  <el-button class="edit-btn" type="primary" :icon="Edit" circle @click="editReimburse(reimburse.id)"/>
                  <el-button class="delete-btn" type="danger" :icon="Delete" circle @click="deleteReimburse(reimburse.id)" />
                </div>

                <!-- 发票图片 -->
                <div class="invoice-images"
                     v-if="reimburse.invoices && reimburse.invoices.length > 0">
                  <div v-for="(invoice, iIndex) in reimburse.invoices" :key="iIndex"
                       class="invoice-item">
                    <img :src="invoice.invoiceImg" class="invoice-img" @click="zoomImage(invoice.invoiceImg)">
                  </div>
                </div>
              </div>
              <div type="primary" size="small" class="add-btn" style="cursor: pointer" @click="reimbursementApply(applyId,plan.id)">添加报销记录</div>
            </div>
            <!-- 无报销记录提示 -->
            <div class="reimburse-section" v-else>
              <div class="empty-state">
                <el-icon class="empty-icon">
                  <Document/>
                </el-icon>
                <p>暂无报销记录</p>
                <el-button type="primary" size="small" style="cursor: pointer" @click="reimbursementApply(applyId,plan.id)">添加报销记录</el-button>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <el-icon class="empty-icon">
          <Notebook/>
        </el-icon>
        <p>暂无行程计划</p>
      </div>


      <el-button class="add-plan-btn" type="primary" size="large" @click="submitReimburse">
        提交报销
      </el-button>
    </div>
    <div v-if="zoomedImage" class="image-modal" @click="closeZoom">
      <div class="modal-content" @click.stop="stopPropagation">
        <button class="close-btn" @click="closeZoom">×</button>
        <img :src="zoomedImage" alt="放大预览" class="zoomed-image"/>
      </div>
    </div>
    <ReimbursementApply ref="reiApplyRef" />
  </div>
</template>

<style scoped lang="scss">
.container {

  background: #fff;
  padding: 30px;
  margin-bottom: 30px;
  margin-top: 12px;
  border: 1px solid #dddcdc;


  .page-title {
    color: #303133;
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
  }


  /* 行程计划卡片样式 */
  .plan-card {
    margin-bottom: 25px;
    border-radius: 10px;
    border: 1px solid #e4e7ed;
    min-height: 400px;
    background: linear-gradient(to right, #e0e2f8, #eeeef4, #fff);

    .plan-header {
      background: linear-gradient(135deg, rgba(14, 25, 159, 0.74) 0%, rgba(91, 103, 246, 0.74) 100%);
      color: white;
      padding: 16px 20px;
      border-radius: 10px 10px 0 0;
      .plan-span {
        margin-left: 140px;
      }

      .reimburse-span {
        margin-left: 320px;
      }

    }

    .plan-content {
      width: 300px;
      padding: 0 18px;
      float: left;

      .plan-type {
        font-size: 18px;
        font-weight: 600;
      }

      .plan-budget {
        font-size: 16px;
        font-weight: 500;
      }

      .plan-detail {
        margin-bottom: 15px;
        color: #606266;
        line-height: 1.6;
        margin-top: 10px;

        span{
          display: inline-block;
          width: 300px;
          margin: 5px 0;
        }
      }


      .budget-detail {
        color: #909399;
        font-size: 14px;
        margin-bottom: 20px;
        padding: 10px;
        background: #f5f7fa;
        border-radius: 6px;

        span{
          display: inline-block;
          width: 300px;
          margin: 5px 0;
        }
      }




      /* 超支提醒样式 */
      .overspend-alert {
        background: #fef0f0;
        color: #f56c6c;
        padding: 12px 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start;
        border-left: 4px solid #f56c6c;
      }

      .overspend-icon {
        margin-right: 10px;
        font-size: 18px;
        margin-top: 2px;
      }
    }

    .reimburse-content {
      display: inline-block;
      width: 490px;
    }

  }



  /* 报销列表样式 */
  .reimburse-section {
    margin-top: 20px;

    .add-btn{
      display: inline-block;
      width: 300px;
      height: 40px;
      background-color: #66b1ff;
      color: white;
      margin-bottom: 10px;
      border-radius: 8px;
      line-height: 40px;
      padding-left: 190px;
    }
  }

  .reimburse-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #303133;
    border-bottom: 1px solid #e4e7ed;
    padding-bottom: 8px;
  }

  .reimburse-item {
    padding: 10px 15px;
    background: #f9fafc;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #e4e7ed;

    .reimburse-header {
      margin-bottom: 5px;
      position: relative;

      .reimburse-amount {
        font-weight: 600;
        color: #e6a23c;
        font-size: 16px;
      }

      .reimburse-detail {
        color: #606266;
        margin-bottom: 12px;
        font-size: 15px;
        margin-left: 40px;
        position: absolute;
        left: 60px;
        top: 0;

        max-width: 250px;
      }

      .delete-btn{
        position: absolute;
        right: 0;
        top: 0;
        margin-left: 190px;
      }

      .edit-btn{
        position: absolute;
        right: 40px;
        top: 0;
      }
    }



  }

  .invoice-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .invoice-item {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e4e7ed;
  }

  .invoice-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .invoice-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px;
    font-size: 12px;
    text-align: center;
  }

  .add-invoice-btn {
    height: 80px;
    width: 80px;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* 添加新计划按钮 */
  .add-plan-btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 20px;
  }

  /* 空状态样式 */
  .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #909399;
  }

  .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: #c0c4cc;
  }
}

.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;

  .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zoomIn 0.3s ease;
    z-index: 100;
  }

  @keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .zoomed-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 101;
  }

  .close-btn {
    position: absolute;
    top: -10px;
    right: -20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    transition: background 0.3s ease;
  }

  .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
  }




}
</style>
